<template>
  <div>
    <!-- 时间 -->
    <div class="msg-time" v-if="RESOURCE_TYPE_NUM.TIME == msgData.resourceType">
      {{ msgData.resource }}
    </div>
    <!-- 已撤回标识 -->
    <div class="msg-withdraw" v-if="RESOURCE_TYPE_NUM.WITHDRAW ==msgData.resourceType">
      科室撤回一条消息
    </div>
    <!-- 科室 -->
    <div
      class="msg-item-box flex"
      :class="{'flex-row-reverse' : isPatients}"
      v-if="msgData.resource !== '' && msgData.resourceType !== 6"
    >
      <div class="msg-avatar">
        <Image round :src="avatar" />
      </div>
      <div class="msg-box flex flex-column flex-justify">
        <div class="msg-name">
          {{ msgData.employeeName }}
        </div>

        <!-- 文本消息 -->
        <div
          class="msg-text"
          v-if="isResourceType(RESOURCE_TYPE_NUM.TEXT)"
        >
          {{ msgData.resource }}
        </div>

        <!-- 图片消息 -->
        <div v-if="isResourceType(RESOURCE_TYPE_NUM.IMAGE)">
          <div
            class="msg-img"
          >
            <Image
              fit="cover"
              :src="msgData.resource"
              @click="preview(msgData.resource)"
            />
          </div>
        </div>

        <!-- 视频消息 -->
        <video-play
          @click="updateTrackData('视频',msgData.messageId)"
          :msg-data="msgData"
          v-if="isResourceType(RESOURCE_TYPE_NUM.VIDEO)"
        />

        <!-- 语音消息 -->
        <audio-play
          @click="updateTrackData('音频',msgData.messageId)"
          v-if="isResourceType(RESOURCE_TYPE_NUM.AUDIO)"
          :url="msgData.resource"
          :duration="msgData.mediaDuration"
        />

        <!-- 问卷 -->
        <!-- fromType 问卷来源类型0，小程序首页，1患者群发（计划），2智能推送  planDetailId 推送计划详情id  questionId 问卷主键-->
        <div
          class="msg-text question-msg"
          v-if="isResourceType(RESOURCE_TYPE_NUM.QUESTIONNAIRE)"
        >
          <router-link :to="`/follow?planDetailId=${msgData.detailsId}&questionId=${msgData.resource}&fromType=${msgData.messageFromtype}`">
            <div class="question-title">
              {{ msgData.resourceTitle }}
            </div>
            <div class="question-img">
              <Image :src="require('@/static/question.png')" />
            </div>
          </router-link>
        </div>

        <!-- 文章 -->
        <router-link :to="`/article/${msgData.resource}?channel=${channel}&planDetailId=${msgData.detailsId}`" v-if="isResourceType(RESOURCE_TYPE_NUM.ARTICLE)">
          <div class="msg-text article-msg-msg" :class="msgData.senderType===0 ? 'msg-text-right' : ''">
            <div class="question-title">
              {{ msgData.resourceTitle }}
            </div>
            <div class="flex flex-center">
              <div class="question-img">
                <Image :src="msgData.coverPicture" />
              </div>
            </div>
          </div>
        </router-link>

        <!-- 图文 -->
        <div
          class="msg-text article-msg"
          v-if="isResourceType(RESOURCE_TYPE_NUM.IMAGE_TEXT)"
        >
          <div class="article-title">
            {{ msgData.resource || '' }}
          </div>
          <div class="article-img-list flex" v-if="msgData.pictures">
            <div
              class="article-img"
              v-for="item of msgData.pictures"
              :key="item"
            >
              <Image @click="preview(item)" :src="item" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, ref } from 'vue';
import Image from '@/components/Image';
import AudioPlay from '@/components/AudioPlay';
import VideoPlay from '@/components/VideoPlay';
import { SENDER_TYPE, RESOURCE_TYPE_NUM, CHANNEL } from '@/constants/business';
import { DEFAULT_NURSE_AVATAR } from '@/constants/static';
import Preview from '@/components/PreviewImage';

export default {
  emits: ['updateTrackData'],
  props: {
    msgItem: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    Image,
    AudioPlay,
    VideoPlay
  },
  setup(props, { emit }) {
    const msgData = computed(() => props.msgItem || {});
    const videoShow = ref(false);
    const videoUrl = ref('');
    const isPatients = computed(() => SENDER_TYPE.PATIENT === props.msgItem.senderType);
    const avatar = computed(
      () =>
        (props.msgItem.senderType == SENDER_TYPE.DEPARTMENT
          ? props.msgItem.employeeHeadImgUrl
          : props.msgItem.patientsHeadImgUrl || props.msgItem.employeeHeadImg) ||
        DEFAULT_NURSE_AVATAR //我的消息进来的 ， 字段是employeeHeadImg
    );

    function isResourceType(type) {
      return props.msgItem.resourceType === type;
    }

    function updateTrackData(type, messageId) {
      emit('updateTrackData', type, messageId);
    }

    function preview(url) {
      // Preview.open(url);
      //这个带放大功能
      wx.previewImage({
        current: url, // 当前显示图片的http链接
        urls: [url] // 需要预览的图片http链接列表
      });
    }

    const channel = computed(() =>
      msgData.value.messageFromtype == 0 ? CHANNEL.SMART_PUSH : CHANNEL.PATIENT_GROUP
    );

    return {
      msgData,
      isPatients,
      avatar,
      RESOURCE_TYPE_NUM,
      isResourceType,
      preview,
      videoShow,
      videoUrl,
      channel,
      updateTrackData
    };
  }
};
</script>

<style lang="scss" scoped>
.msg-item-box {
  margin-bottom: 40px;
}
.msg-avatar {
  width: 100px;
  height: 100px;
}

.msg-box {
  margin: 0 16px;
  align-items: flex-start;
}

.flex-row-reverse {
  flex-direction: row-reverse;
  .msg-text {
    background: #27cdc5;
    border-radius: 36px 0 36px 36px;
    color: #fff;
  }
  .msg-box {
    align-items: flex-end;
  }

  .msg-img {
    border-radius: 36px 0 36px 36px;
  }
}

.msg-time {
  font-size: 24px;
  font-weight: 400;
  color: #777b8f;
  line-height: 34px;
  text-align: center;
  margin-bottom: 40px;
}

.msg-withdraw {
  margin: auto;
  width: 270px;
  line-height: 1;
  padding: 6px 0;
  background: #e9e9ed;
  border-radius: 6px;
  font-size: 24px;
  font-weight: 500;
  color: #a2a6b8;
  text-align: center;
  margin-bottom: 40px;
}

.msg-text {
  max-width: 454px;
  padding: 15px 32px;
  font-size: 26px;
  font-weight: 400;
  color: #373d52;
  background: #fff;
  border-radius: 0 36px 36px;
}

.msg-text-right {
  border-radius: 36px 0 36px 36px !important;
}

.msg-img {
  width: 300px;
  height: 200px;
  border-radius: 0 36px 36px;
  overflow: hidden;
}

.msg-name {
  font-size: 24px;
  font-weight: 500;
  color: #a2a6b8;
  line-height: 1.2;
  margin-bottom: 10px;
}

// 问卷
.question-msg {
  width: 364px;
  .question-title {
    font-size: 30px;
    font-weight: 500;
    color: #373d52;
  }

  .question-content {
    font-size: 24px;
    font-weight: 400;
    color: #777b8f;
  }

  .question-img {
    width: 300px;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
  }
}

// 文章
.article-img {
  max-width: 300px;
  margin-right: 10px;
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
}
.article-msg-msg {
  display: flex;
  min-height: 150px;
  .question-title {
    display: flex;
    align-items: center;
    font-size: 30px;
    font-weight: 500;
    color: #373d52;
    margin-right: 10px;
  }

  .question-content {
    font-size: 24px;
    font-weight: 400;
    color: #777b8f;
  }

  .question-img {
    width: 150px;
    overflow: hidden;
  }
}
.unread {
  position: relative;
  &::before {
    content: '·';
    position: absolute;
    right: -50px;
    top: 50%;
    color: #ff2424;
    font-size: 40px;
    line-height: 1;
    font-family: 'SimSun';
  }
}
.msg-vioce {
  width: 204px;
  display: inline-block;
}
</style>
<style>
.msg-item {
  background: #000 !important;
}
</style>